<template>
  <div class="device-parameter">
    <h2 class="title">*第一列为小型，第二列为中型，第三列为大型</h2>
    <div class="form-section">
      <!-- 燃气锅炉部分 -->
      <div class="equipment-section">
<div class="submit-device-container">
  <button class="distribution-btn device-submit-btn" @click="submitAllDeviceParams">
    <span class="btn-text">提交设备参数</span>

  </button>
</div>
        <h3 class="equipment-title">燃气锅炉</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="ranqiguolu11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="ranqiguolu12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="ranqiguolu13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">热效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ranqiguolu21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ranqiguolu22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ranqiguolu23" class="form-input">
            </div>
          </div>
        </div>
      </div>
      <!-- 凝汽式热电联产机组部分 -->
      <div class="equipment-section">
        <h3 class="equipment-title">凝汽式热电联产机组</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="ningqishi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="ningqishi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="ningqishi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">发电效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ningqishi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ningqishi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ningqishi23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <!-- 背压式热电联产机组部分 -->
      <div class="equipment-section">
        <h3 class="equipment-title">背压式热电联产机组</h3>

        <div class="input-group">
          <label class="input-label">发电容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="beiyashi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="beiyashi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="beiyashi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">发热容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">发电效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi33" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">发热效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi41" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi42" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi43" class="form-input">
            </div>
          </div>
        </div>
      </div>
      <!-- 火力发电机组部分 -->
      <div class="equipment-section">
        <h3 class="equipment-title">火力发电机组</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="huoli11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="huoli12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="huoli13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">发电效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="huoli21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="huoli22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="huoli23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">核电站</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="hedian11" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="hedian21" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">可调度(削减)的核电比例</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="hedian31" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">地热能机组</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="dire11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="dire12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="dire13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">地热发电效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dire21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dire22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dire23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">水电+抽水蓄能(水电参数)</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="shuidian11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="shuidian12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="shuidian13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">上层水库的储能容量(MWh)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian33" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">每年补给的水量(GWh/y)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian41" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian42" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="shuidian43" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">水电+抽水蓄能(抽水蓄能参数)</h3>

        <div class="input-group">
          <label class="input-label">抽水泵最大功率(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="choushui11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="choushui12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="choushui13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">抽水泵效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">下层水库的储能容量(回蓄池)(GWh)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui33" class="form-input">
            </div>
          </div>
        </div>
      </div>


      <div class="equipment-section">
        <h3 class="equipment-title">电网输电能力</h3>

        <div class="input-group">
          <label class="input-label">线路容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="dianwang" class="form-input">
            </div>
          </div>
        </div>
      </div>


      <div class="equipment-section">
        <h3 class="equipment-title">集中式光伏</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="jizhongshi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="jizhongshi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="jizhongshi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="jizhongshi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="jizhongshi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="jizhongshi23" class="form-input">
            </div>
          </div>
        </div>
      </div>


      <div class="equipment-section">
        <h3 class="equipment-title">海上风电</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="haishang11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="haishang12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="haishang13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">切入风速(m/s)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang33" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">最大风速(m/s)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang41" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang42" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang43" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">切出风速(m/s)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang51" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang52" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang53" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <!-- Group 51 -->
      <div class="equipment-section">
        <h3 class="equipment-title">陆上风电</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="lushang11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="lushang12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="lushang13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">切入风速(m/s)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang33" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">最大风速(m/s)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang41" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang42" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang43" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">切出风速(m/s)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang51" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang52" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang53" class="form-input">
            </div>
          </div>
        </div>
      </div>

       <div class="equipment-section">
        <h3 class="equipment-title">聚光太阳能</h3>

        <div class="input-group">
          <label class="input-label">年太阳热输入(MWh/year)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="juguang11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="juguang12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="juguang13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">储热容量(MWh)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">储热损失率(百分比/小时)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang33" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang41" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang42" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang43" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">发电效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang51" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang52" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang53" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">太阳能供热</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="gongre11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="gongre12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="gongre13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="gongre21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="gongre22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="gongre23" class="form-input">
            </div>
          </div>
        </div>
      </div>

       <div class="equipment-section">
        <h3 class="equipment-title">压缩式热泵</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="yasuo11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="yasuo12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="yasuo13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="yasuo21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="yasuo22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="yasuo23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">地源热泵</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="diyuan11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="diyuan12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="diyuan13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="diyuan21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="diyuan22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="diyuan23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">电解槽</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="dianjiecao11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="dianjiecao12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="dianjiecao13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">产氢效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">产热效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao33" class="form-input">
            </div>
          </div>
        </div>
      </div>


     <div class="equipment-section">
        <h3 class="equipment-title">碳捕集</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="tanbuji11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="tanbuji12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="tanbuji13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="tanbuji21" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">二氧化碳存储容量(m3)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="tanbuji31" class="form-input">
            </div>
          </div>
        </div>
      </div>

     <div class="equipment-section">
        <h3 class="equipment-title">燃料电池</h3>

        <div class="input-group">
          <label class="input-label">容量(MW)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="dianchi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="dianchi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="dianchi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">发电效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi23" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">产热效率</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi31" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi32" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi33" class="form-input">
            </div>
          </div>
        </div>
      </div>
   </div>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, type Ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';


const submitAllDeviceParams = async () => {
  try {
    const payloads = [
 { id: 1, value: parseFloat(ranqiguolu11.value) || 0, url: 'guolu' },
  { id: 2, value: parseFloat(ranqiguolu12.value) || 0, url: 'guolu' },
  { id: 3, value: parseFloat(ranqiguolu13.value) || 0, url: 'guolu' },
  { id: 4, value: parseFloat(ranqiguolu21.value) || 0, url: 'guolu' },
  { id: 5, value: parseFloat(ranqiguolu22.value) || 0, url: 'guolu' },
  { id: 6, value: parseFloat(ranqiguolu23.value) || 0, url: 'guolu' },
  { id: 1, value: parseFloat(ningqishi11.value) || 0, url: 'ningqi' },
  { id: 2, value: parseFloat(ningqishi12.value) || 0, url: 'ningqi' },
  { id: 3, value: parseFloat(ningqishi13.value) || 0, url: 'ningqi' },
  { id: 4, value: parseFloat(ningqishi21.value) || 0, url: 'ningqi' },
  { id: 5, value: parseFloat(ningqishi22.value) || 0, url: 'ningqi' },
  { id: 6, value: parseFloat(ningqishi23.value) || 0, url: 'ningqi' },
  { id: 1, value: parseFloat(beiyashi11.value) || 0, url: 'beiya' },
  { id: 2, value: parseFloat(beiyashi12.value) || 0, url: 'beiya' },
  { id: 3, value: parseFloat(beiyashi13.value) || 0, url: 'beiya' },
  { id: 4, value: parseFloat(beiyashi21.value) || 0, url: 'beiya' },
  { id: 5, value: parseFloat(beiyashi22.value) || 0, url: 'beiya' },
  { id: 6, value: parseFloat(beiyashi23.value) || 0, url: 'beiya' },
  { id: 7, value: parseFloat(beiyashi31.value) || 0, url: 'beiya' },
  { id: 8, value: parseFloat(beiyashi32.value) || 0, url: 'beiya' },
  { id: 9, value: parseFloat(beiyashi33.value) || 0, url: 'beiya' },
  { id: 10, value: parseFloat(beiyashi41.value) || 0, url: 'beiya' },
  { id: 11, value: parseFloat(beiyashi42.value) || 0, url: 'beiya' },
  { id: 12, value: parseFloat(beiyashi43.value) || 0, url: 'beiya' },
  { id: 1, value: parseFloat(huoli11.value) || 0, url: 'huoli' },
  { id: 2, value: parseFloat(huoli12.value) || 0, url: 'huoli' },
  { id: 3, value: parseFloat(huoli13.value) || 0, url: 'huoli' },
  { id: 4, value: parseFloat(huoli21.value) || 0, url: 'huoli' },
  { id: 5, value: parseFloat(huoli22.value) || 0, url: 'huoli' },
  { id: 6, value: parseFloat(huoli23.value) || 0, url: 'huoli' },
  { id: 1, value: parseFloat(hedian11.value) || 0, url: 'hedian' },
  { id: 2, value: parseFloat(hedian21.value) || 0, url: 'hedian' },
  { id: 3, value: parseFloat(hedian31.value) || 0, url: 'hedian' },
  { id: 1, value: parseFloat(dire11.value) || 0, url: 'dire' },
  { id: 2, value: parseFloat(dire12.value) || 0, url: 'dire' },
  { id: 3, value: parseFloat(dire13.value) || 0, url: 'dire' },
  { id: 4, value: parseFloat(dire21.value) || 0, url: 'dire' },
  { id: 5, value: parseFloat(dire22.value) || 0, url: 'dire' },
  { id: 6, value: parseFloat(dire23.value) || 0, url: 'dire' },
  { id: 1, value: parseFloat(shuidian11.value) || 0, url: 'shuidian' },
  { id: 2, value: parseFloat(shuidian12.value) || 0, url: 'shuidian' },
  { id: 3, value: parseFloat(shuidian13.value) || 0, url: 'shuidian' },
  { id: 4, value: parseFloat(shuidian21.value) || 0, url: 'shuidian' },
  { id: 5, value: parseFloat(shuidian22.value) || 0, url: 'shuidian' },
  { id: 6, value: parseFloat(shuidian23.value) || 0, url: 'shuidian' },
  { id: 7, value: parseFloat(shuidian31.value) || 0, url: 'shuidian' },
  { id: 8, value: parseFloat(shuidian32.value) || 0, url: 'shuidian' },
  { id: 9, value: parseFloat(shuidian33.value) || 0, url: 'shuidian' },
  { id: 10, value: parseFloat(shuidian41.value) || 0, url: 'shuidian' },
  { id: 11, value: parseFloat(shuidian42.value) || 0, url: 'shuidian' },
  { id: 12, value: parseFloat(shuidian43.value) || 0, url: 'shuidian' },
  { id: 1, value: parseFloat(choushui11.value) || 0, url: 'choushui' },
  { id: 2, value: parseFloat(choushui12.value) || 0, url: 'choushui' },
  { id: 3, value: parseFloat(choushui13.value) || 0, url: 'choushui' },
  { id: 4, value: parseFloat(choushui21.value) || 0, url: 'choushui' },
  { id: 5, value: parseFloat(choushui22.value) || 0, url: 'choushui' },
  { id: 6, value: parseFloat(choushui23.value) || 0, url: 'choushui' },
  { id: 7, value: parseFloat(choushui31.value) || 0, url: 'choushui' },
  { id: 8, value: parseFloat(choushui32.value) || 0, url: 'choushui' },
  { id: 9, value: parseFloat(choushui33.value) || 0, url: 'choushui' },
  { id: 1, value: parseFloat(dianwang.value) || 0, url: 'dianwang' },
  { id: 1, value: parseFloat(jizhongshi11.value) || 0, url: 'jizhong' },
  { id: 2, value: parseFloat(jizhongshi12.value) || 0, url: 'jizhong' },
  { id: 3, value: parseFloat(jizhongshi13.value) || 0, url: 'jizhong' },
  { id: 4, value: parseFloat(jizhongshi21.value) || 0, url: 'jizhong' },
  { id: 5, value: parseFloat(jizhongshi22.value) || 0, url: 'jizhong' },
  { id: 6, value: parseFloat(jizhongshi23.value) || 0, url: 'jizhong' },
  { id: 1, value: parseFloat(haishang11.value) || 0, url: 'haishang' },
  { id: 2, value: parseFloat(haishang12.value) || 0, url: 'haishang' },
  { id: 3, value: parseFloat(haishang13.value) || 0, url: 'haishang' },
  { id: 4, value: parseFloat(haishang21.value) || 0, url: 'haishang' },
  { id: 5, value: parseFloat(haishang22.value) || 0, url: 'haishang' },
  { id: 6, value: parseFloat(haishang23.value) || 0, url: 'haishang' },
  { id: 7, value: parseFloat(haishang31.value) || 0, url: 'haishang' },
  { id: 8, value: parseFloat(haishang32.value) || 0, url: 'haishang' },
  { id: 9, value: parseFloat(haishang33.value) || 0, url: 'haishang' },
  { id: 10, value: parseFloat(haishang41.value) || 0, url: 'haishang' },
  { id: 11, value: parseFloat(haishang42.value) || 0, url: 'haishang' },
  { id: 12, value: parseFloat(haishang43.value) || 0, url: 'haishang' },
  { id: 13, value: parseFloat(haishang51.value) || 0, url: 'haishang' },
  { id: 14, value: parseFloat(haishang52.value) || 0, url: 'haishang' },
  { id: 15, value: parseFloat(haishang53.value) || 0, url: 'haishang' },
  { id: 1, value: parseFloat(lushang11.value) || 0, url: 'lushang' },
  { id: 2, value: parseFloat(lushang12.value) || 0, url: 'lushang' },
  { id: 3, value: parseFloat(lushang13.value) || 0, url: 'lushang' },
  { id: 4, value: parseFloat(lushang21.value) || 0, url: 'lushang' },
  { id: 5, value: parseFloat(lushang22.value) || 0, url: 'lushang' },
  { id: 6, value: parseFloat(lushang23.value) || 0, url: 'lushang' },
  { id: 7, value: parseFloat(lushang31.value) || 0, url: 'lushang' },
  { id: 8, value: parseFloat(lushang32.value) || 0, url: 'lushang' },
  { id: 9, value: parseFloat(lushang33.value) || 0, url: 'lushang' },
  { id: 10, value: parseFloat(lushang41.value) || 0, url: 'lushang' },
  { id: 11, value: parseFloat(lushang42.value) || 0, url: 'lushang' },
  { id: 12, value: parseFloat(lushang43.value) || 0, url: 'lushang' },
  { id: 13, value: parseFloat(lushang51.value) || 0, url: 'lushang' },
  { id: 14, value: parseFloat(lushang52.value) || 0, url: 'lushang' },
  { id: 15, value: parseFloat(lushang53.value) || 0, url: 'lushang' },
  { id: 1, value: parseFloat(juguang11.value) || 0, url: 'juguang' },
  { id: 2, value: parseFloat(juguang12.value) || 0, url: 'juguang' },
  { id: 3, value: parseFloat(juguang13.value) || 0, url: 'juguang' },
  { id: 4, value: parseFloat(juguang21.value) || 0, url: 'juguang' },
  { id: 5, value: parseFloat(juguang22.value) || 0, url: 'juguang' },
  { id: 6, value: parseFloat(juguang23.value) || 0, url: 'juguang' },
  { id: 7, value: parseFloat(juguang31.value) || 0, url: 'juguang' },
  { id: 8, value: parseFloat(juguang32.value) || 0, url: 'juguang' },
  { id: 9, value: parseFloat(juguang33.value) || 0, url: 'juguang' },
  { id: 10, value: parseFloat(juguang41.value) || 0, url: 'juguang' },
  { id: 11, value: parseFloat(juguang42.value) || 0, url: 'juguang' },
  { id: 12, value: parseFloat(juguang43.value) || 0, url: 'juguang' },
  { id: 13, value: parseFloat(juguang51.value) || 0, url: 'juguang' },
  { id: 14, value: parseFloat(juguang52.value) || 0, url: 'juguang' },
  { id: 15, value: parseFloat(juguang53.value) || 0, url: 'juguang' },
  { id: 1, value: parseFloat(gongre11.value) || 0, url: 'gongre' },
  { id: 2, value: parseFloat(gongre12.value) || 0, url: 'gongre' },
  { id: 3, value: parseFloat(gongre13.value) || 0, url: 'gongre' },
  { id: 4, value: parseFloat(gongre21.value) || 0, url: 'gongre' },
  { id: 5, value: parseFloat(gongre22.value) || 0, url: 'gongre' },
  { id: 6, value: parseFloat(gongre23.value) || 0, url: 'gongre' },
  { id: 1, value: parseFloat(yasuo11.value) || 0, url: 'yasuo' },
  { id: 2, value: parseFloat(yasuo12.value) || 0, url: 'yasuo' },
  { id: 3, value: parseFloat(yasuo13.value) || 0, url: 'yasuo' },
  { id: 4, value: parseFloat(yasuo21.value) || 0, url: 'yasuo' },
  { id: 5, value: parseFloat(yasuo22.value) || 0, url: 'yasuo' },
  { id: 6, value: parseFloat(yasuo23.value) || 0, url: 'yasuo' },
  { id: 1, value: parseFloat(diyuan11.value) || 0, url: 'diyuan' },
  { id: 2, value: parseFloat(diyuan12.value) || 0, url: 'diyuan' },
  { id: 3, value: parseFloat(diyuan13.value) || 0, url: 'diyuan' },
  { id: 4, value: parseFloat(diyuan21.value) || 0, url: 'diyuan' },
  { id: 5, value: parseFloat(diyuan22.value) || 0, url: 'diyuan' },
  { id: 6, value: parseFloat(diyuan23.value) || 0, url: 'diyuan' },
  { id: 1, value: parseFloat(dianjiecao11.value) || 0, url: 'dianjiecao' },
  { id: 2, value: parseFloat(dianjiecao12.value) || 0, url: 'dianjiecao' },
  { id: 3, value: parseFloat(dianjiecao13.value) || 0, url: 'dianjiecao' },
  { id: 4, value: parseFloat(dianjiecao21.value) || 0, url: 'dianjiecao' },
  { id: 5, value: parseFloat(dianjiecao22.value) || 0, url: 'dianjiecao' },
  { id: 6, value: parseFloat(dianjiecao23.value) || 0, url: 'dianjiecao' },
  { id: 7, value: parseFloat(dianjiecao31.value) || 0, url: 'dianjiecao' },
  { id: 8, value: parseFloat(dianjiecao32.value) || 0, url: 'dianjiecao' },
  { id: 9, value: parseFloat(dianjiecao33.value) || 0, url: 'dianjiecao' },
  { id: 1, value: parseFloat(tanbuji11.value) || 0, url: 'tanbuji' },
  { id: 2, value: parseFloat(tanbuji12.value) || 0, url: 'tanbuji' },
  { id: 3, value: parseFloat(tanbuji13.value) || 0, url: 'tanbuji' },
  { id: 4, value: parseFloat(tanbuji21.value) || 0, url: 'tanbuji' },
  { id: 5, value: parseFloat(tanbuji31.value) || 0, url: 'tanbuji' },
  { id: 1, value: parseFloat(dianchi11.value) || 0, url: 'dianchi' },
  { id: 2, value: parseFloat(dianchi12.value) || 0, url: 'dianchi' },
  { id: 3, value: parseFloat(dianchi13.value) || 0, url: 'dianchi' },
  { id: 4, value: parseFloat(dianchi21.value) || 0, url: 'dianchi' },
  { id: 5, value: parseFloat(dianchi22.value) || 0, url: 'dianchi' },
  { id: 6, value: parseFloat(dianchi23.value) || 0, url: 'dianchi' },
  { id: 7, value: parseFloat(dianchi31.value) || 0, url: 'dianchi' },
  { id: 8, value: parseFloat(dianchi32.value) || 0, url: 'dianchi' },
  { id: 9, value: parseFloat(dianchi33.value) || 0, url: 'dianchi' }
    ]

    for (const item of payloads) {
      await axios.put(`http://localhost:8080/${item.url}`, {
        id: item.id,
        value: item.value
      })
    }

    ElMessage.success('所有设备参数提交成功')
  } catch (err) {
    ElMessage.error('提交失败，请检查网络或数据')
    console.error(err)
  }
}

const fetchAndSet = async (url: string, variable: Ref<string>) => {
  try {
    const response = await axios.get(url);
    variable.value = response.data.value;
  } catch  {
    ElMessage.error(`加载 ${url} 失败`);
  }
};
// Data for all 51 groups


onMounted(async () => {

await fetchAndSet('http://localhost:8080/guolu/1', ranqiguolu11);
await fetchAndSet('http://localhost:8080/guolu/2', ranqiguolu12);
await fetchAndSet('http://localhost:8080/guolu/3', ranqiguolu13);
await fetchAndSet('http://localhost:8080/guolu/4', ranqiguolu21);
await fetchAndSet('http://localhost:8080/guolu/5', ranqiguolu22);
await fetchAndSet('http://localhost:8080/guolu/6', ranqiguolu23);
await fetchAndSet('http://localhost:8080/ningqi/1', ningqishi11);
await fetchAndSet('http://localhost:8080/ningqi/2', ningqishi12);
await fetchAndSet('http://localhost:8080/ningqi/3', ningqishi13);
await fetchAndSet('http://localhost:8080/ningqi/4', ningqishi21);
await fetchAndSet('http://localhost:8080/ningqi/5', ningqishi22);
await fetchAndSet('http://localhost:8080/ningqi/6', ningqishi23);
await fetchAndSet('http://localhost:8080/beiya/1', beiyashi11);
await fetchAndSet('http://localhost:8080/beiya/2', beiyashi12);
await fetchAndSet('http://localhost:8080/beiya/3', beiyashi13);
await fetchAndSet('http://localhost:8080/beiya/4', beiyashi21);
await fetchAndSet('http://localhost:8080/beiya/5', beiyashi22);
await fetchAndSet('http://localhost:8080/beiya/6', beiyashi23);
await fetchAndSet('http://localhost:8080/beiya/7', beiyashi31);
await fetchAndSet('http://localhost:8080/beiya/8', beiyashi32);
await fetchAndSet('http://localhost:8080/beiya/9', beiyashi33);
await fetchAndSet('http://localhost:8080/beiya/10', beiyashi41);
await fetchAndSet('http://localhost:8080/beiya/11', beiyashi42);
await fetchAndSet('http://localhost:8080/beiya/12', beiyashi43);
await fetchAndSet('http://localhost:8080/huoli/1', huoli11);
await fetchAndSet('http://localhost:8080/huoli/2', huoli12);
await fetchAndSet('http://localhost:8080/huoli/3', huoli13);
await fetchAndSet('http://localhost:8080/huoli/4', huoli21);
await fetchAndSet('http://localhost:8080/huoli/5', huoli22);
await fetchAndSet('http://localhost:8080/huoli/6', huoli23);
await fetchAndSet('http://localhost:8080/hedian/1', hedian11);
await fetchAndSet('http://localhost:8080/hedian/2', hedian21);
await fetchAndSet('http://localhost:8080/hedian/3', hedian31);
await fetchAndSet('http://localhost:8080/dire/1', dire11);
await fetchAndSet('http://localhost:8080/dire/2', dire12);
await fetchAndSet('http://localhost:8080/dire/3', dire13);
await fetchAndSet('http://localhost:8080/dire/4', dire21);
await fetchAndSet('http://localhost:8080/dire/5', dire22);
await fetchAndSet('http://localhost:8080/dire/6', dire23);
await fetchAndSet('http://localhost:8080/shuidian/1', shuidian11);
await fetchAndSet('http://localhost:8080/shuidian/2', shuidian12);
await fetchAndSet('http://localhost:8080/shuidian/3', shuidian13);
await fetchAndSet('http://localhost:8080/shuidian/4', shuidian21);
await fetchAndSet('http://localhost:8080/shuidian/5', shuidian22);
await fetchAndSet('http://localhost:8080/shuidian/6', shuidian23);
await fetchAndSet('http://localhost:8080/shuidian/7', shuidian31);
await fetchAndSet('http://localhost:8080/shuidian/8', shuidian32);
await fetchAndSet('http://localhost:8080/shuidian/9', shuidian33);
await fetchAndSet('http://localhost:8080/shuidian/10', shuidian41);
await fetchAndSet('http://localhost:8080/shuidian/11', shuidian42);
await fetchAndSet('http://localhost:8080/shuidian/12', shuidian43);
await fetchAndSet('http://localhost:8080/choushui/1', choushui11);
await fetchAndSet('http://localhost:8080/choushui/2', choushui12);
await fetchAndSet('http://localhost:8080/choushui/3', choushui13);
await fetchAndSet('http://localhost:8080/choushui/4', choushui21);
await fetchAndSet('http://localhost:8080/choushui/5', choushui22);
await fetchAndSet('http://localhost:8080/choushui/6', choushui23);
await fetchAndSet('http://localhost:8080/choushui/7', choushui31);
await fetchAndSet('http://localhost:8080/choushui/8', choushui32);
await fetchAndSet('http://localhost:8080/choushui/9', choushui33);
await fetchAndSet('http://localhost:8080/dianwang/1', dianwang);
await fetchAndSet('http://localhost:8080/jizhong/1', jizhongshi11);
await fetchAndSet('http://localhost:8080/jizhong/2', jizhongshi12);
await fetchAndSet('http://localhost:8080/jizhong/3', jizhongshi13);
await fetchAndSet('http://localhost:8080/jizhong/4', jizhongshi21);
await fetchAndSet('http://localhost:8080/jizhong/5', jizhongshi22);
await fetchAndSet('http://localhost:8080/jizhong/6', jizhongshi23);
await fetchAndSet('http://localhost:8080/haishang/1', haishang11);
await fetchAndSet('http://localhost:8080/haishang/2', haishang12);
await fetchAndSet('http://localhost:8080/haishang/3', haishang13);
await fetchAndSet('http://localhost:8080/haishang/4', haishang21);
await fetchAndSet('http://localhost:8080/haishang/5', haishang22);
await fetchAndSet('http://localhost:8080/haishang/6', haishang23);
await fetchAndSet('http://localhost:8080/haishang/1', haishang31);
await fetchAndSet('http://localhost:8080/haishang/2', haishang32);
await fetchAndSet('http://localhost:8080/haishang/3', haishang33);
await fetchAndSet('http://localhost:8080/haishang/4', haishang41);
await fetchAndSet('http://localhost:8080/haishang/5', haishang42);
await fetchAndSet('http://localhost:8080/haishang/6', haishang43);
await fetchAndSet('http://localhost:8080/haishang/7', haishang51);
await fetchAndSet('http://localhost:8080/haishang/8', haishang52);
await fetchAndSet('http://localhost:8080/haishang/9', haishang53);

await fetchAndSet('http://localhost:8080/lushang/1', lushang11);
await fetchAndSet('http://localhost:8080/lushang/2', lushang12);
await fetchAndSet('http://localhost:8080/lushang/3', lushang13);
await fetchAndSet('http://localhost:8080/lushang/4', lushang21);
await fetchAndSet('http://localhost:8080/lushang/5', lushang22);
await fetchAndSet('http://localhost:8080/lushang/6', lushang23);
await fetchAndSet('http://localhost:8080/lushang/7', lushang31);
await fetchAndSet('http://localhost:8080/lushang/8', lushang32);
await fetchAndSet('http://localhost:8080/lushang/9', lushang33);
await fetchAndSet('http://localhost:8080/lushang/10', lushang41);
await fetchAndSet('http://localhost:8080/lushang/11', lushang42);
await fetchAndSet('http://localhost:8080/lushang/12', lushang43);
await fetchAndSet('http://localhost:8080/lushang/13', lushang51);
await fetchAndSet('http://localhost:8080/lushang/14', lushang52);
await fetchAndSet('http://localhost:8080/lushang/15', lushang53);
await fetchAndSet('http://localhost:8080/juguang/1', juguang11);
await fetchAndSet('http://localhost:8080/juguang/2', juguang12);
await fetchAndSet('http://localhost:8080/juguang/3', juguang13);
await fetchAndSet('http://localhost:8080/juguang/4', juguang21);
await fetchAndSet('http://localhost:8080/juguang/5', juguang22);
await fetchAndSet('http://localhost:8080/juguang/6', juguang23);
await fetchAndSet('http://localhost:8080/juguang/7', juguang31);
await fetchAndSet('http://localhost:8080/juguang/8', juguang32);
await fetchAndSet('http://localhost:8080/juguang/9', juguang33);
await fetchAndSet('http://localhost:8080/juguang/10', juguang41);
await fetchAndSet('http://localhost:8080/juguang/11', juguang42);
await fetchAndSet('http://localhost:8080/juguang/12', juguang43);
await fetchAndSet('http://localhost:8080/juguang/13', juguang51);
await fetchAndSet('http://localhost:8080/juguang/14', juguang52);
await fetchAndSet('http://localhost:8080/juguang/15', juguang53);
await fetchAndSet('http://localhost:8080/gongre/1', gongre11);
await fetchAndSet('http://localhost:8080/gongre/2', gongre12);
await fetchAndSet('http://localhost:8080/gongre/3', gongre13);
await fetchAndSet('http://localhost:8080/gongre/4', gongre21);
await fetchAndSet('http://localhost:8080/gongre/5', gongre22);
await fetchAndSet('http://localhost:8080/gongre/6', gongre23);

// 压缩式热泵
await fetchAndSet('http://localhost:8080/yasuo/1', yasuo11);
await fetchAndSet('http://localhost:8080/yasuo/2', yasuo12);
await fetchAndSet('http://localhost:8080/yasuo/3', yasuo13);
await fetchAndSet('http://localhost:8080/yasuo/4', yasuo21);
await fetchAndSet('http://localhost:8080/yasuo/5', yasuo22);
await fetchAndSet('http://localhost:8080/yasuo/6', yasuo23);

// 地源热泵
await fetchAndSet('http://localhost:8080/diyuan/1', diyuan11);
await fetchAndSet('http://localhost:8080/diyuan/2', diyuan12);
await fetchAndSet('http://localhost:8080/diyuan/3', diyuan13);
await fetchAndSet('http://localhost:8080/diyuan/4', diyuan21);
await fetchAndSet('http://localhost:8080/diyuan/5', diyuan22);
await fetchAndSet('http://localhost:8080/diyuan/6', diyuan23);

// 电解槽
await fetchAndSet('http://localhost:8080/dianjiecao/1', dianjiecao11);
await fetchAndSet('http://localhost:8080/dianjiecao/2', dianjiecao12);
await fetchAndSet('http://localhost:8080/dianjiecao/3', dianjiecao13);
await fetchAndSet('http://localhost:8080/dianjiecao/4', dianjiecao21);
await fetchAndSet('http://localhost:8080/dianjiecao/5', dianjiecao22);
await fetchAndSet('http://localhost:8080/dianjiecao/6', dianjiecao23);
await fetchAndSet('http://localhost:8080/dianjiecao/7', dianjiecao31);
await fetchAndSet('http://localhost:8080/dianjiecao/8', dianjiecao32);
await fetchAndSet('http://localhost:8080/dianjiecao/9', dianjiecao33);

// 燃料电池
await fetchAndSet('http://localhost:8080/dianchi/1', dianchi11);
await fetchAndSet('http://localhost:8080/dianchi/2', dianchi12);
await fetchAndSet('http://localhost:8080/dianchi/3', dianchi13);
await fetchAndSet('http://localhost:8080/dianchi/4', dianchi21);
await fetchAndSet('http://localhost:8080/dianchi/5', dianchi22);
await fetchAndSet('http://localhost:8080/dianchi/6', dianchi23);
await fetchAndSet('http://localhost:8080/dianchi/7', dianchi31);
await fetchAndSet('http://localhost:8080/dianchi/8', dianchi32);
await fetchAndSet('http://localhost:8080/dianchi/9', dianchi33);

// 碳捕集
await fetchAndSet('http://localhost:8080/tanbuji/1', tanbuji11);
await fetchAndSet('http://localhost:8080/tanbuji/2', tanbuji12);
await fetchAndSet('http://localhost:8080/tanbuji/3', tanbuji13);
await fetchAndSet('http://localhost:8080/tanbuji/4', tanbuji21);
await fetchAndSet('http://localhost:8080/tanbuji/5', tanbuji31);

})

const ranqiguolu11 = ref('')
const ranqiguolu12 = ref('')
const ranqiguolu13 = ref('')
const ranqiguolu21 = ref('')
const ranqiguolu22 = ref('')
const ranqiguolu23 = ref('')

const ningqishi11 = ref('')
const ningqishi12 = ref('')
const ningqishi13 = ref('')
const ningqishi21 = ref('')
const ningqishi22 = ref('')
const ningqishi23 = ref('')

const beiyashi11 = ref('')
const beiyashi12 = ref('')
const beiyashi13 = ref('')
const beiyashi21 = ref('')
const beiyashi22 = ref('')
const beiyashi23 = ref('')
const beiyashi31 = ref('')
const beiyashi32 = ref('')
const beiyashi33 = ref('')
const beiyashi41 = ref('')
const beiyashi42 = ref('')
const beiyashi43 = ref('')

const huoli11 = ref('')
const huoli12 = ref('')
const huoli13 = ref('')
const huoli21 = ref('')
const huoli22 = ref('')
const huoli23 = ref('')

const hedian11 = ref('')
const hedian21 = ref('')
const hedian31 = ref('')

const dire11 = ref('')
const dire12 = ref('')
const dire13 = ref('')
const dire21 = ref('')
const dire22 = ref('')
const dire23 = ref('')

const shuidian11 = ref('')
const shuidian12 = ref('')
const shuidian13 = ref('')
const shuidian21 = ref('')
const shuidian22 = ref('')
const shuidian23 = ref('')
const shuidian31 = ref('')
const shuidian32 = ref('')
const shuidian33 = ref('')
const shuidian41 = ref('')
const shuidian42 = ref('')
const shuidian43 = ref('')

const choushui11 = ref('')
const choushui12 = ref('')
const choushui13 = ref('')
const choushui21 = ref('')
const choushui22 = ref('')
const choushui23 = ref('')
const choushui31 = ref('')
const choushui32 = ref('')
const choushui33 = ref('')

const dianwang = ref('')

const jizhongshi11 = ref('')
const jizhongshi12 = ref('')
const jizhongshi13 = ref('')
const jizhongshi21 = ref('')
const jizhongshi22 = ref('')
const jizhongshi23 = ref('')

const haishang11 = ref('')
const haishang12 = ref('')
const haishang13 = ref('')
const haishang21 = ref('')
const haishang22 = ref('')
const haishang23 = ref('')
const haishang31 = ref('')
const haishang32 = ref('')
const haishang33 = ref('')
const haishang41 = ref('')
const haishang42 = ref('')
const haishang43 = ref('')
const haishang51 = ref('')
const haishang52 = ref('')
const haishang53 = ref('')

const lushang11 = ref('')
const lushang12 = ref('')
const lushang13 = ref('')
const lushang21 = ref('')
const lushang22 = ref('')
const lushang23 = ref('')
const lushang31 = ref('')
const lushang32 = ref('')
const lushang33 = ref('')
const lushang41 = ref('')
const lushang42 = ref('')
const lushang43 = ref('')
const lushang51 = ref('')
const lushang52 = ref('')
const lushang53 = ref('')

const juguang11 = ref('')
const juguang12 = ref('')
const juguang13 = ref('')
const juguang21 = ref('')
const juguang22 = ref('')
const juguang23 = ref('')
const juguang31 = ref('')
const juguang32 = ref('')
const juguang33 = ref('')
const juguang41 = ref('')
const juguang42 = ref('')
const juguang43 = ref('')
const juguang51 = ref('')
const juguang52 = ref('')
const juguang53 = ref('')

const gongre11 = ref('')
const gongre12 = ref('')
const gongre13 = ref('')
const gongre21 = ref('')
const gongre22 = ref('')
const gongre23 = ref('')

const yasuo11 = ref('')
const yasuo12 = ref('')
const yasuo13 = ref('')
const yasuo21 = ref('')
const yasuo22 = ref('')
const yasuo23 = ref('')

const diyuan11 = ref('')
const diyuan12 = ref('')
const diyuan13 = ref('')
const diyuan21 = ref('')
const diyuan22 = ref('')
const diyuan23 = ref('')

const dianjiecao11 = ref('')
const dianjiecao12 = ref('')
const dianjiecao13 = ref('')
const dianjiecao21 = ref('')
const dianjiecao22 = ref('')
const dianjiecao23 = ref('')
const dianjiecao31 = ref('')
const dianjiecao32 = ref('')
const dianjiecao33 = ref('')

const tanbuji11 = ref('')
const tanbuji12 = ref('')
const tanbuji13 = ref('')
const tanbuji21 = ref('')
const tanbuji31 = ref('')


const dianchi11 = ref('')
const dianchi12 = ref('')
const dianchi13 = ref('')
const dianchi21 = ref('')
const dianchi22 = ref('')
const dianchi23 = ref('')
const dianchi31 = ref('')
const dianchi32 = ref('')
const dianchi33 = ref('')



// Single generate function for all groups
</script>

<style scoped>
.submit-emission-container {
  text-align: center;
  margin-top: 24px;
}

.emission-submit-btn {
  background-color: #7c3aed; /* 绿色 */
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.2);
}

.emission-submit-btn:hover {
  background-color: #7c3aed;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3);
}
.equipment-section {
  margin-bottom: 30px;
  border-left: 4px solid #7c3aed;
  padding-left: 16px;
}

.equipment-title {
  color: #4c1d95;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.input-group {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.input-label {
  min-width: 160px;
  font-weight: 500;
  color: #475569;
  padding-top: 10px;
}

.input-controls {
  flex: 1;
  display: flex;
  gap: 20px;
}

.column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}

.column-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.form-input {
  padding: 10px 12px;
  border: 1px solid #053676;
  border-radius: 6px;
  width: 80px;
  text-align: right;
  font-size: 14px;
  background: white;
}

.device-parameter {
  background-color: #f8fafc;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 36px;
  max-width: 920px;
  margin: 0 auto;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: #1e293b;
}

.title {
  color: #4c1d95;
  text-align: center;
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 700;
  padding-bottom: 16px;
  border-bottom: 2px solid #7c3aed;
  letter-spacing: 0.5px;
}

.section-title {
  color: #475569;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.form-section, .info-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}



.input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid #f8fafc;
}


.form-input.small {
  width: 100px;
}

.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.unit, .info-value {
  margin: 0 12px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.distribution-btn {
  background-color: #7c3aed;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.distribution-btn:hover {
  background-color: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.btn-text {
  font-size: 14px;
  line-height: 1.2;
}

.file-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-style: italic;
  margin-top: 2px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.info-card {
  background-color: #f8fafc;
  padding: 18px;
  border-radius: 10px;
  border-left: 4px solid #7c3aed;
  transition: transform 0.2s, box-shadow 0.2s;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-label {
  display: block;
  font-weight: 500;
  color: #475569;
  margin-bottom: 10px;
  font-size: 15px;
}

.info-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .device-parameter {
    padding: 24px;
    border-radius: 0;
  }

  .input-group {
    flex-direction: column;
    gap: 8px;
  }

  .input-label {
    min-width: auto;
    padding-top: 0;
    margin-bottom: 6px;
  }

  .input-controls {
    width: 100%;
  }

  .form-input {
    width: 100%;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
